import { PageContainer } from '@ant-design/pro-components';
import React, { useState, useEffect } from 'react';
import { Tree, Row, Col, Space, Button, Empty, Input, message,Popconfirm } from 'antd';
const { Search } = Input
import { useIntl } from 'umi'
import { PlusSquareOutlined, FormOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import styles from './index.less';
import { OPERATE_ADD, OPERATE_EDIT, OPERATE_DELETE, TREE_ID, TREE_NAME, TREE_CHILDREN, TREE_ROOT, STATUS_ENABLED } from '../../constants/index'
import DictTypeOperatePanel from './components/DictTypeOperatePanel';
import PaginationQueryDictDataTable from './components/PaginationQueryDictDataTable';
import { queryDictTypeTree, deleteDictType } from '../../services/dictType'


function Dict() {
    const intl = useIntl();
    const [treeData, setTreeData] = useState()
    const [showPanel, setShowPanel] = useState(false)
    const [showTable, setShowTable] = useState(false) //为保证获取完依赖数据之后再渲染子组件
    const [nodeData, setNodeData] = useState()
    const [operateType, setOperateType] = useState()
    const [selectedDictTypeUnCode, setSelectedDictTypeUnCode] = useState()
    let defaultSelectedKeyArr = [] //默认选中的树节点标识数组
    useEffect(() => {
        initDictType();
    }, [])
    let initDictType = async () => {
        setShowTable(false)
        await queryDictTypeTree().then(res => {
            if (res.success) {
                if (res.data) {
                    if (Array.isArray(res.data) && res.data.length > 0) {
                        setSelectedDictTypeUnCode(res.data[0].unCode) //默认选中第一个树节点
                        defaultSelectedKeyArr.push(res.data[0].unCode)
                    }
                    setTreeData(res.data)
                    setShowTable(true)
                }
            }
        }).catch(err => {
            console.log(err)
        })
    }
    const onSelect = async (selectedKeys, info) => {
        setSelectedDictTypeUnCode(selectedKeys[0])
        setNodeData({ ...nodeData, unCode: info.node.unCode, type: info.node.type, name: info.node.name, statusFlag: info.node.statusFlag, parentUnCode: info.node.parentUnCode, remark: info.node.remark })
    };
    const onCheck = (checkedKeys, info) => {
        console.log('onCheck', checkedKeys, info);
    };
    const openPanel = (operateType, nodeData, e) => {
        setShowPanel(true);
        setOperateType(operateType);
        setNodeData(nodeData);
    };
    let closePanel = () => {
        setShowPanel(false)
    }
    let onSearch = () => {
        message.info("正在建设中。。。")
    }
    let onDelete = async (nodeData) => {
        await deleteDictType(nodeData.unCode).then(res => {
            if (res.success) {
                message.success(res.msg)
                initDictType()
            }
        })
    }
    return (
        <PageContainer ghost>
            <Row justify="space-between">
                {showPanel && <DictTypeOperatePanel operateType={operateType} nodeDate={nodeData} closePanel={closePanel} initDictType={initDictType} />}
                <Col span={5}>
                    <Space>
                        <Search
                            placeholder={intl.formatMessage({
                                id: 'app.dictType.sider.panel.search.placeholder',
                                defaultMessage: '请输入字典类型名称'
                            })}
                            onSearch={onSearch} />
                        <Button
                            className={styles.dict_type_sider_button_add}
                            type="primary" icon={<PlusOutlined />} onClick={() => { openPanel(OPERATE_ADD, { parentUnCode: TREE_ROOT, unCode: TREE_ROOT, statusFlag: STATUS_ENABLED }) }}>{intl.formatMessage({
                                id: 'component.button.add',
                                defaultMessage: '添加'
                            })}
                        </Button>
                    </Space>
                    {(Array.isArray(treeData) && treeData.length === 0) ? <Empty /> : <Tree
                        defaultSelectedKeys={defaultSelectedKeyArr}
                        className={styles.dict_type_sider_tree}
                        checkable
                        onSelect={onSelect}
                        onCheck={onCheck}
                        fieldNames={{ title: TREE_NAME, key: TREE_ID, children: TREE_CHILDREN }}
                        treeData={treeData}
                        titleRender={(nodeData) => {
                            return (
                                <Space>
                                    {nodeData.name}
                                    <a onClick={(e) => { openPanel(OPERATE_ADD, nodeData, e) }}><PlusSquareOutlined /></a>
                                    <a onClick={(e) => { openPanel(OPERATE_EDIT, nodeData, e) }}><FormOutlined /></a>
                                    <Popconfirm
                                        key={'delete'}
                                        title={intl.formatMessage({
                                            id: 'pages.Popconfirm.title',
                                            defaultMessage: '确认删除'
                                        })}
                                        toolBar
                                        description={intl.formatMessage({
                                            id: 'pages.Popconfirm.description',
                                            defaultMessage: '是否删除该条记录？'
                                        })}
                                        onConfirm={() => { onDelete(nodeData) }}
                                        okText={intl.formatMessage({
                                            id: 'pages.Popconfirm.okText',
                                            defaultMessage: '确认'
                                        })}
                                        cancelText={intl.formatMessage({
                                            id: 'pages.Popconfirm.cancelText',
                                            defaultMessage: '取消'
                                        })}>
                                        <a><DeleteOutlined style={{ color: 'red' }} /></a>
                                    </Popconfirm>
                                </Space>
                            )
                        }}
                    />}

                </Col>
                <Col span={19}>{showTable && <PaginationQueryDictDataTable dictTypeUnCode={selectedDictTypeUnCode} />}</Col>
            </Row>
        </PageContainer>

    );
}
export default Dict
